.widget{
  width:600px;
  height:400px;
}

.widget mat-card-content{
  width: 100%;
}

#cpu-cores-chart{
  /*position: absolute;
  left: 0;
  bottom: 0;*/
  width: 536px;
  margin:0 16px;
}

#cpu-cores-wrapper{
  padding-top: 3%;
}

#cpu-load-wrapper{
  position:relative;
  height:170px;
}

#cpu-load-cores{
  /*opacity:0.5;*/
}

#cpu-load-cores-legend{
  /*margin-top:36px;*/
}

#cpu-load-cores-legend .legend-item.chart-label{
  text-align:center;
}

#cpu-load-cores-legend-values{
  width:100%;
  margin:16px 0 16px 16px;
}

#cpu-load-cores-legend .legend-item{
  text-align:left;
  padding-left:15%;
  width:85%;
}

#cpu-load-cores-legend .legend-item .label{
  font-weight:500;
}

#cpu-load-cores-legend .legend-item .legend-swatch{
  margin: 4px 8px 0;
}

#cpu-load-cores-values {
  width:100%;
}

#cpu-load-cores-values .temperature{
  text-align:right;
}

#cpu-load-label{
  margin-bottom:0;
  font-weight:400;
}

#cpu-load-value{
  position:absolute;
  top:41%;
  width:100%;
  font-size:175%;
}

.title-wrapper{
  /*background-color:var(--blue);
  color:#fff;*/
  height:45%;
  text-align: left;
  padding: 16px;
  width:100%;
}

.title-wrapper .widget-loader{
  position:absolute;
  top:0;
  left:0;
  width:100%;
}

.title-wrapper .title{
  font-size:150%;
}

.title-wrapper .subtitle{
  font-size:80%;
}

.bar-chart{
  margin-bottom:8px;
  padding-left: 32px;
}

h1.memory-used{
  margin: 56px 0 0;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: 350%;
  line-height: 20px;
}

h1.memory-used span.memory-used-units{
  font-size:50%;
  margin-left: 5px;
}

.spinner-wrapper{
  text-align:center;
  top: 48px;
  position: absolute;
  width: 100%;
}

.chart-wrapper{
  position:relative;
  width:100%;
}

.x-axis .start-time, 
.x-axis .end-time{
    font-size: 75%;
    position: absolute;
    bottom: 0;
    font-weight:500;
    font-family:Roboto;
    opacity:0.5;
}

.x-axis .start-time{
  left:8px;
}
.x-axis .end-time{
  right:8px;
}

.controls{
  position:absolute;
  right:16px;
  color:var(--fg2);
}

.controls button{
  display:inline-block;
}

.primary-stat-wrapper{
  padding-bottom:48px;
}

.xs .primary-stat-wrapper{
  padding-bottom:0px;
}

#memory-usage-chart{
  height:260px;
  padding:16px;
  position: relative;
}

#memory-usage-chart canvas{
  height:200px;
  width:calc(100% - 32px);
}

/*:host ::ng-deep .c3-axis-y g:nth-child(2n){
  visibility:hidden;
}*/

/* MARKER */
:host ::ng-deep .c3-chart-line .c3-circles circle._expanded_{
  stroke:var(--primary) !important;
}
:host ::ng-deep .c3-chart-line circle.c3-circle{
  fill:var(--bg2) !important;
}

/* NARROW SCREENS */
.xs.widget{
  width: 100%;
  height: calc(100vh - 96px);
  position:absolute;
  /*top: 88px;
  z-index: 2;*/
}

.list-subheader{
  font-weight:700;
  padding: 8px 8px 0 16px;
  text-align:left;
  font-size: 90%;
  color: var(--fg1);
}

.mat-list-base .mat-list-item{
  border-bottom:solid 1px rgba(0,0,0,0.1);
}

.xs.widget #cpu-load-cores-legend .legend-item .legend-swatch{
  margin-top: 0;
}

.xs.widget #cpu-load-cores-legend .legend-item .label ,
.xs.widget #cpu-load-cores-legend .legend-item .value {
  margin-top: 2px;
}

/* Overrides */
.widget .c3 .c3-axis g.tick tspan{
  fill-opacity:1;
  font-weight:500;
}

.xs #cpu-load-cores-legend .legend-item{
  padding-left:0;
}

